We have now covered the fundamentals of HTML. All the main elements have been dealt
with and you should have enough information to create the HTML for a good web site.
Let's close this series with a bit of eye, and ear, candy. Text and pictures are
often enough to convey and illustrate your message, but there are times when a little
movement or sound can improve the experience of visiting your site. It's also true
that excessive use of these, or any other feature, can make your site a real pain in
the neck. As with all things, moderation is important. If you're going to add a
feature to your site, do it because it will improve the site, not simply because you
can do it.
Animated pages
Animations can be inline or external. Of the various inline animation formats
available, the only one fully supported by Amiga browsers is the AnimGIF. This is
used in exactly the same way as a static GIF image, here is the full tag
<IMG SRC="myanim.gif" ALIGN=LEFT WIDTH="100" HEIGHT="50" HSPACE="3" VSPACE="2" BORDER="0" ALT="Anim">
Being identical to the format for a static GIF means you have no compatibility
worries. Any browser incapable of displaying animated GIFs will display the first
frame as a static image. The disadvantage is that there are no extra attributes to
control the playing of the animation. All timing and looping information has to be in
the image itself.
GIF animations are suited to small animated buttons and logos, if you want to include
something more ambitious you'll need another format. HTML has a tag for including any
type of multimedia content in a document, the <OBJECT> tag. This is a very flexible
tag, allowing new data formats to be added easily, but it is hardly supported on the
Amiga browsers. IBrowse and Voyager don't support it at all, AWeb supports only some
of the attributes, but these are mainly the ones also handled by its MIME type
settings. OBJECT has the facility to download the player for a file format if you
don't already have it, but since there are no Amiga players for many of the newer
file formats it would be best to avoid using OBJECT for animations.
We may not be able to use anything but GIF for inline animations, but we can display
any format externally, provided we have a suitable player installed and a MIME type
defined. For example:
<A HREF="Maze.mpg"><IMG SRC="Maze.jpg" WIDTH="188" HEIGHT="120" ALT="Click to see anim"></A>
will display a static image on the page (the first frame of the animation in this
case) as a clickable link to the full animation. Provided the user has a MIME type
setting for mpeg video, with a suitable player, the animation will be shown by his
chosen player. This isn't the place for a detailed explanation of how to configure
the MIME types in a browser, but it is important to understand that both browsers and
servers use filename extensions to determine the type of a file. It is therefore
essential that you use the correct extension for any file you link to on your web
site. Most browsers can cope with a JPEG image saved with a .gif extension (it
happens, more often than you may think), but MPEG video saved with .anim would really
confuse the system.
Adding sound
Audio data can also be included in a web page, either inline or as an
external link. There are two tags used to add inline audio, <BGSOUND>
will play a sample when a page is loaded
<BGSOUND SRC="sample.wav" LOOPS="1">
This will play the sample once when the page is loaded. Setting LOOPS to "-1" or
"INFINITE" will cause the sample to be played continuously. Be careful how you use
BGSOUND, it is played every time the page is loaded. If you put it on your home or
index page, it will be played each time a visitor jumps back from one of your other
pages. If it gets too annoying they will do one of two things, turn their speakers
down or go elsewhere. Similarly, LOOPS="INFINITE" should be used only rarely, and
only with very soft sounds. A well chosen sample may create an atmosphere, a badly
chosen one will drive people away. Most browsers can handle .wav format samples, many
can also deal with MIDI files. WAV is not a good format for web use, the files can
get quite large. A visitor with a slow connection may have linked to another page
before the BGSOUND finishes loading and plays. MIDI is a very compact format, loading
quickly, but it can only really be used for music, not voice or sound effect samples.
<OBJECT> is somewhat more useful for audio than video, since the Amiga is able to
handle most audio formats now and these can be set up via MIME types. This will play
a MIDI file, provided the browser has been set up to play MIDI
<OBJECT DATA="walkof.mid" WIDTH="1" HEIGHT="1" TYPE="AUDIO/MIDI">If you can read this, your browser either does not support the <OBJECT> tag, or it does not support this type of object.</OBJECT>
All the information required to play the file is included as attributes of the
<OBJECT> tag. DATA contains the URL of the data file, it is the equivalent of SRC in
an IMG tag. WIDTH and HEIGHT are used by the browser to leave space for the files
contents. Because audio in not displayed, we set them as small as possible here. TYPE
tells the browser to use whatever player is configured in this MIME type. If the
browser is unable to handle this type of file, it won't attempt to download it. There
are other attributes that can even download the player if you don't have it, but none
of the Amiga browsers support this (yet). The text between <OBJECT> and </OBJECT> is
displayed if the browser is unable to handle this type of object. You can nest
<OBJECT> tags, effectively giving first, second, etc. choices of how the file should
be handled.
The third way of playing sound files is through external files
<A HREF="tune.mp3"><IMG SRC="speaker.gif" WIDTH="25" HEIGHT = "25" ALT="Play"></A>
will place an image in the document that will download and play the file when
clicked. This is the most straightforward way of providing "on demand" sounds, as
opposed to the automatic playing of BGSOUND and OBJECT. Unlike animation, there is no
obvious difference between "inline" and "external" audio. It's usually best to stick
with <BGSOUND> for sounds to be played immediately and <A HREF> for on demand audio.
Most audio MIME type setups will download the complete file before passing it to the
player, but there are also methods of playing "streaming" audio. This is where the
sound is played in real time as it it downloaded. Streamed audio is normally in MP3
or RealAudio format. If you want to add streamed audio to your own pages you will
need to speak to your web space provider. Most ISPs do not provide audio streaming
for their home pages.
It is something of a tradition to finish a tutorial series with an example that uses
all the techniques covered. We aren't doing that here because it goes against the
principle of using what works, rather than using what you can. Using all the facets
of HTML that we have covered would result in a total mess. Consider HTML a toolbox,
you don't use every spanner and screwdriver you own on a single job just because you
own them. The key to a successful web site is planning, work out what you want to say
and how you want to say it. Then decide which of the HTML tools in your toolbox will
achieve your objectives. Happy HTMLing.
Figure 1: Here's a selection of animation and sound links, but you'll need to load the page from the CD to try them.
Boxout
======
Meta Tags
This is a special tag you can use in the <HEAD> section of a page, the META tag
provides a few miscellaneous features. It takes two attributes, the first is NAME or
HTTP-EQUIV and describes the type of action the tag has. The second is CONTENT to
specify the details of that action.
<META NAME="REFRESH" CONTENT="5;URL=http://www.mynewpage.com">
will cause the browser to load http://www.mynewpage.com after five seconds. You can
lower this figure but don't set it to zero or the visitor will never be able to go
back to the previous page, every time he hits this page he will immediately jump
forward again, leave at least one second delay.
<META HTTP-EQUIV="Expires" Content="Fri, 23 Apr 1999">
tells the browser to reload the page if the date is later than given, rather than
using a cached or proxy copy. This is useful if your page contains time-sensitive
information, say news, and you don't want visitors seeing an old copy.
<META NAME="keywords" CONTENT="amiga,audio,graphics,multimedia">
<META NAME="description" CONTENT="Detailed information on using graphics, audio and multimedia on the Amiga range of computers">
These two are usually found together and are used by search engines. If the keywords
tag is found the search engine will use this to index your page instead of picking
words from the general content, so your site can be indexed more accurately. The text
in the description tag is shown by the search engine when it lists your page in
response to a search. Search engines normally list the first couple of sentences of
the page's text, by including your own description you can ensure that the search
engine will report the information you want it to report.